<template>
	<div>
		
		
		
						  <el-transfer
						    filterable
						    v-model="brandJuniorParam.sortIds"
						    :data="bigSorts"
							@change="testChange()"
							>
						  </el-transfer>				
					
		
		
		
		
		<div>
			<table border="0px">
				<el-row >
				  <i class="el-icon-search" style="margin-left: 5px;;">筛选查询</i>
				  <el-input placeholder="请输入类型名称查询" v-model="bbb.propertyName" style="width: 230px;margin-left: 505px;" ></el-input>
				  &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" @click="select">查询</el-button>
				</el-row>
			<el-divider></el-divider>
			</table>
			
			<table border="0px">
			<el-row >
			  <i class="el-icon-s-grid" style="margin-left: 5px;">数据列表</i>
				<el-button type="primary"@click="addtask=true" style="margin-left: 760px;">新增</el-button>	
			</el-row>
			 <el-divider></el-divider>
			</table>
			
			 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			    <el-table-column type="selection" width="100"></el-table-column>
			    <el-table-column prop="propertyId" label="编号" width="130px">
			    </el-table-column>
			    <el-table-column prop="propertyName" label="参数名称" width="130px">
				</el-table-column>
				<el-table-column prop="sort.sortName" label="参数是否可选" width="130px">
				</el-table-column>
				<el-table-column prop="propertyNum" label="录入方式" width="130px">
				</el-table-column>
			    <el-table-column prop="propertyStatus" label="可选值列表" width="130px">	
				</el-table-column>
				<el-table-column prop="name" label="操作" width="250">
					<template slot-scope="scope">
						<el-button type="text"  >参数列表</el-button>
						<el-button type="text" @click="updateProper(scope.row.propertyId)" >修改</el-button>
						<el-button type="text"  @click="delProperty(scope.row.propertyId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div>
				<el-pagination :current-page="bbb.pageParam.indexPage" @current-change="changePage"
					background layout="prev, pager, next" :total="total" :page-size="bbb.pageParam.size"> 
				</el-pagination>
			</div>

			  
			 <el-dialog title="新增参数" :visible.sync="addtask" @close="clearfrom">
						  <el-form :model="addParameter"  label-width="100px" class="demo-ruleForm">
							  <el-row >
									<el-form-item label="参数名称" prop="name" style="width: 400px;">
									  <el-input v-model="addParameter.propertyName"></el-input>
									</el-form-item>
							  </el-row>
			
							  	<el-row >
							  		<el-form-item label="属性是否可选" prop="name" style="width: 400px;">
							  		<el-radio-group v-model="addParameter.parameterType">
							  		    <el-radio :label="唯一属性">唯一属性</el-radio>
							  		    <el-radio :label="单选属性">单选属性</el-radio>
							  		    <el-radio :label="复选属性">复选属性</el-radio>
							  		  </el-radio-group>
							  	 </el-select>
							  	 </el-form-item>
							  	</el-row>
								
								<el-row >
									<el-form-item label="录入方式" prop="name" style="width: 400px;">
										<el-input v-model="addParameter.parameterWay"></el-input>
									</el-form-item>
						
							  
							  <el-row>
								  <el-form-item label="规格" prop="name" style="width: 200px;">
								  <el-input
								    type="textarea"
								    :rows="2"
								    placeholder="请输入内容"
								    v-model="addParameter.sizeName">
								  </el-input>
								  </el-form-item>
							  </el-row>

						   </el-form>
						   <div align="center">
						      <el-button @click="clearfrom">清空</el-button>
						      <el-button type="primary"  @click="addOneParameter" >保存</el-button>
						    </div>
						      
				 </el-dialog>
				
				
				<el-dialog title="修改参数" :visible.sync="deltask" @close="clearfrom">
					<el-form :model="updateParameter"  label-width="100px" class="demo-ruleForm">
						<el-row >
							<el-form-item label="编号" prop="name" style="width: 400px;">
								<el-input v-model="updateParameter.parameterId" :disabled="true">{{updatePropertyParam.propertyId}}</el-input>
							</el-form-item>
						</el-row>
						<el-row >
							<el-form-item label="参数名称" prop="name" style="width: 400px;">
								<el-input v-model="updateParameter.parameterName"></el-input>
							</el-form-item>
						</el-row>
						<el-row >
							<el-form-item label="属性是否可选" prop="name" style="width: 400px;">
							<el-radio-group v-model="updateParameter.parameterType">
							    <el-radio :label="唯一属性">唯一属性</el-radio>
							    <el-radio :label="单选属性">单选属性</el-radio>
							    <el-radio :label="复选属性">复选属性</el-radio>
							  </el-radio-group>
						 </el-select>
						 </el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="可选规格列表" prop="name" style="width: 200px;">
							<el-input
								type="textarea"
									:rows="2"
								placeholder="请输入内容"
								v-model="updateParameter.name">
							</el-input>
							</el-form-item>
						</el-row>
						
					</el-form>
					<div>
						<el-button @click="clearfrom">清空</el-button>
						<el-button type="primary"  @click="setParameter" >保存</el-button>
					</div>						      
			    </el-dialog>
				
			
				
				
				
				
			  
		</div>

	</div>






</template>

<script>
	export default {
		name: 'GoodProperty',
		data() {
			return {
				textarea: '',
				sort:[],
				tStatus:null,
				//新增属性关联大类id
				status:[
					
					{value:1,label:"箱包"},
					{value:2,label:"珠宝首饰"},
					{value:3,label:"钟表"},
					{value:4,label:"服饰"}
				],
				property: [],
				bbb:{
					pageParam:{
						indexPage:1,
						size:10
					},
					parameterName:null
				},
				addtask:false,
				deltask:false,
				radio: null,
				addPropertyParam:{
					parameterName:null,
					parameterType:null,
					sizeName:null,
					propertyId:null,
				},
				updateParameter:{
					parameterId:null,
					parameterName:null,
					parameterType:null,
					name:null
				},
				
				delparam:{
					
				},
				selects: [],
				total: 0,
				tableData: [],
				multipleSelection: []
				      
			}
		},
		methods: {
			getSorts(){
				this.$http.get("/pawnbackgroundsystem/property/getSort").then((resp)=>{
					console.log("----------------------------------")
					console.log(resp)
					if(resp.data.coed=='2002') {
						this.sort=resp.data.data;
						console.log(this.sort);
					} 
				})
			},
			//当前行参数传递
			updateProper(index){
				console.log(index);
				this.updatePropertyParam.propertyId=index;
				this.deltask=true
			},
			
			//修改属性
			setParameter(){
				this.$http.post("/pawnbackgroundsystem/parameter/updateParameter",this.updateParameter).then((resp)=>{
					this.deltask=false;
					console.log(resp)
					if(resp.data.coed=='2002') {
						this.$message({
							message: '修改成功',
							type: 'success'
					    });
							this.select();
					} 
				})
			},
			
			//新增属性
			addOneParameter(){
				this.$http.post("/pawnbackgroundsystem/parameter/add",this.addPropertyParam).then((resp)=>{
					this.addtask=false;
					if(resp.data.coed=='2002') {
						this.$message({
							message: '新增成功',
							type: 'success'
					    });
							this.select();
					} 
				})
			},
			
			
			//删除参数
			delProperty(propertyId){
				this.$http.get("/pawnbackgroundsystem/parameter/del?num="+propertyId).then((resp)=>{
					console.log(resp);
					if(resp.data.coed=='2002') {
						this.$message({
							message: '删除成功',
							type: 'success'
					    });
							this.select();
					} 
				})	
			},


			select(){
				this.$http.post("/pawnbackgroundsystem/parameter/selectParameter",this.bbb).then((resp)=>{
					console.log(resp)
					this.tableData=resp.data.data.records;
					this.total=resp.data.data.total;
					this.bbb.pageParam.indePage=resp.data.data.current;
						
				})
			},
			
			changePage(index) {
				this.bbb.pageParam.indexPage = index;
				this.select();
			},
			toggleSelection(rows) {
			        if (rows) {
			          rows.forEach(row => {
			            this.$refs.multipleTable.toggleRowSelection(row);
			          });
			        } else {
			          this.$refs.multipleTable.clearSelection();
			        }
			      },
			handleSelectionChange(val) {
			    this.multipleSelection = val;
			},
			clearfrom(){
				this.addPropertyParam={
					propertyName:null,
					sortId:null,
					propertyStatus:null,
					propertyFittings:null,
				}
			}
		},
		created() {
			this.select();
			this.getSorts();
		}

	}
</script>

<style>
</style>
